<template>
  <div class="personal-files-container">
    <div class="files-header">
      <h3>我的文件列表</h3>
      <div class="files-actions">
        <button class="refresh-btn" @click="fetchFiles" :disabled="loading">
          {{ loading ? '加载中...' : '刷新' }}
        </button>
        <input 
          type="file" 
          ref="directFileInput" 
          class="direct-file-input" 
          @change="handleDirectFileSelect" 
        />
        <button class="upload-btn" @click="openFileSelector">上传文件</button>
      </div>
    </div>
    
    <div v-if="loading && !isDeleting" class="loading-indicator">
      正在加载文件列表...
    </div>
    
    <div v-else-if="error" class="error-message">
      {{ error }}
    </div>
    
    <div v-else-if="files.length === 0" class="empty-files">
      您还没有上传任何文件，点击"上传文件"按钮开始使用。
    </div>
    
    <div v-else class="files-table-container">
      <table class="files-table">
        <thead>
          <tr>
            <th>文件名</th>
            <th>类型</th>
            <th>大小</th>
            <th>上传时间</th>
            <th>共享状态</th>
            <th>访问量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(file, index) in files" :key="file.md5">
            <td  >
              <div style="display: flex; align-items: center; gap: 8px;">
                <div class="file-icon" :class="getFileIconClass(file.type)"></div>
                {{ file.file_name }}
              </div>
            </td>
            <td>{{ file.type }}</td>
            <td>{{ formatFileSize(file.size) }}</td>
            <td>{{ file.create_time }}</td>
            <td>{{ file.share_status === 0 ? '未共享' : '已共享' }}</td>
            <td>{{ file.pv }}</td>
            <td >
              <button class="action-btn preview-btn" title="预览" @click="previewFile(file)">
                <span>👁️</span>
              </button>
              <button class="action-btn download-btn" title="下载" @click="downloadFile(file)">
                <span>⬇️</span>
              </button>
              <button class="action-btn share-btn" title="分享" @click="shareFile(file)">
                <span>🔗</span>
              </button>
              <button 
                class="action-btn toggle-share-btn" 
                :title="file.share_status === 0 ? '共享' : '取消共享'" 
                @click="toggleShareStatus(file)"
              >
                <span>{{ file.share_status === 0 ? '📤' : '📥' }}</span>
              </button>
              <button 
                class="action-btn delete-btn" 
                title="删除" 
                @click="confirmDelete(file)"
                :disabled="isDeleting"
              >
                <span>🗑️</span>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
      
      <div class="pagination">
        <span>总计 {{ total }} 个文件</span>
        <div class="pagination-controls">
          <button 
            :disabled="currentPage <= 1"
            @click="changePage(currentPage - 1)"
          >
            上一页
          </button>
          <span>{{ currentPage }} / {{ totalPages }}</span>
          <button 
            :disabled="currentPage >= totalPages"
            @click="changePage(currentPage + 1)"
          >
            下一页
          </button>
        </div>
      </div>
    </div>
    
    <!-- 删除确认对话框 -->
    <div v-if="showDeleteConfirm" class="confirm-dialog-overlay">
      <div class="confirm-dialog">
        <h3>确认删除</h3>
        <p>您确定要删除文件 <strong>"{{ fileToDelete?.file_name }}"</strong> 吗？</p>
        <p class="warning-text">此操作不可撤销。</p>
        <div class="confirm-actions">
          <button 
            class="cancel-btn" 
            @click="cancelDelete" 
            :disabled="isDeleting"
          >
            取消
          </button>
          <button 
            class="delete-confirm-btn" 
            @click="deleteConfirmed" 
            :disabled="isDeleting"
          >
            {{ isDeleting ? '删除中...' : '确认删除' }}
          </button>
        </div>
      </div>
    </div>
    
    <!-- 文件上传对话框 -->
    <div v-if="showUploader" class="upload-dialog-overlay">
      <div class="upload-dialog-container">
        <FileUploader 
          :initialFile="selectedUploadFile"
          @close="cancelUpload" 
          @upload-success="handleUploadSuccess" 
        />
      </div>
    </div>
    
    <!-- 文件预览对话框 -->
    <FilePreview 
      v-if="showPreview" 
      :show="showPreview" 
      :file="previewingFile" 
      @close="closePreview" 
    />
    
    <!-- 分享对话框 -->
    <div v-if="showShareDialog" class="share-dialog-overlay">
      <div class="share-dialog">
        <h3>分享文件</h3>
        <p>分享链接：</p>
        <div class="share-url-container">
          <input 
            type="text" 
            v-model="shareUrl" 
            readonly 
            class="share-url-input"
            ref="shareUrlInput"
          />
          <button 
            class="copy-btn" 
            @click="copyShareLink" 
            :disabled="shareLoading"
          >
            {{ copySuccess ? '已复制' : '复制链接' }}
          </button>
        </div>
        <div class="share-actions">
          <button 
            class="close-btn" 
            @click="closeShareDialog" 
            :disabled="shareLoading"
          >
            关闭
          </button>
        </div>
      </div>
    </div>
    
    <!-- 提示信息 -->
    <div v-if="notification.show" class="notification" :class="notification.type">
      <div class="notification-content">
        <span class="notification-icon">
          {{ notification.type === 'success' ? '✅' : '❌' }}
        </span>
        <span class="notification-message">{{ notification.message }}</span>
        <button class="notification-close" @click="closeNotification">×</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import axios from 'axios';
import FileUploader from './FileUploader.vue';
import FilePreview from './FilePreview.vue';

// 状态变量
const files = ref([]);
const total = ref(0);
const loading = ref(false);
const error = ref('');
const currentPage = ref(1);
const pageSize = 10; // 每页显示的文件数量

// 删除确认对话框状态
const showDeleteConfirm = ref(false);
const fileToDelete = ref(null);
const isDeleting = ref(false);

// 文件上传对话框状态
const showUploader = ref(false);
const directFileInput = ref(null);
const selectedUploadFile = ref(null);

// 通知提示状态
const notification = ref({
  show: false,
  message: '',
  type: 'success', // 'success' 或 'error'
  timer: null
});

// 文件预览相关状态
const showPreview = ref(false);
const previewingFile = ref(null);

// 分享状态
const sharingFile = ref(null);
const shareLoading = ref(false);
const shareUrl = ref('');
const showShareDialog = ref(false);
const shareUrlInput = ref(null);
const copySuccess = ref(false);

// 计算总页数
const totalPages = computed(() => {
  return Math.max(1, Math.ceil(total.value / pageSize));
});

// 获取文件图标类
const getFileIconClass = (fileType) => {
  const typeMap = {
    'png': 'image-icon',
    'jpg': 'image-icon',
    'jpeg': 'image-icon',
    'gif': 'image-icon',
    'mp4': 'video-icon',
    'avi': 'video-icon',
    'mov': 'video-icon',
    'pdf': 'pdf-icon',
    'doc': 'doc-icon',
    'docx': 'doc-icon',
    'xls': 'excel-icon',
    'xlsx': 'excel-icon',
    'txt': 'text-icon',
    'zip': 'archive-icon',
    'rar': 'archive-icon',
    'dll': 'binary-icon'
  };
  
  return typeMap[fileType.toLowerCase()] || 'file-icon';
};

// 格式化文件大小
const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 B';
  
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};

// 获取文件列表
const fetchFiles = async () => {
  loading.value = true;
  error.value = '';
  
  try {
    const token = localStorage.getItem('token');
    const user = localStorage.getItem('user');
    
    if (!token || !user) {
      error.value = '用户未登录或登录已过期';
      return;
    }
    
    // 确保页码正确
    if (currentPage.value < 1) {
      console.log("页码小于1，重置为1");
      currentPage.value = 1;
    }
    
    // 计算起始索引
    // 强制确保是数字类型，防止字符串拼接导致的bug
    const pageNum = Number(currentPage.value);
    const pageSizeNum = Number(pageSize);
    const start = (pageNum - 1) * pageSizeNum;
    
    console.log(`【分页】当前页码: ${pageNum}, 起始索引: ${start}, 每页数量: ${pageSizeNum}`);
    
    // 构建请求数据
    const requestData = {
      count: pageSizeNum,
      start: start,
      token: token,
      user: user
    };
    
    console.log(`【分页】发送请求数据:`, JSON.stringify(requestData));
    
    // 明确设置请求头和数据格式
    const response = await axios.post('/api/myfiles?cmd=normal', requestData, {
      headers: {
        'Content-Type': 'application/json'
      }
    });
    
    console.log('【分页】获取文件列表响应:', JSON.stringify(response.data));
    
    if (response.data.code === 0) {
      // 直接替换而非追加文件列表
      files.value = response.data.files || [];
      total.value = response.data.total || 0;
      
      console.log(`【分页】收到文件数: ${files.value.length}, 总文件数: ${total.value}`);
      
      // 检查是否有重复的文件ID
      const fileIds = files.value.map(f => f.md5);
      const uniqueIds = [...new Set(fileIds)];
      if (fileIds.length !== uniqueIds.length) {
        console.warn(`【分页】警告: 检测到${fileIds.length - uniqueIds.length}个重复文件ID`);
      }
      
      // 纠正页码，确保与实际数据一致
      if (total.value > 0 && files.value.length === 0 && currentPage.value > 1) {
        // 当前页没有数据但总数不为0，回到第一页
        console.log(`【分页】当前页${currentPage.value}无数据，回到第1页`);
        currentPage.value = 1;
        fetchFiles();
        return;
      }
    } else {
      error.value = response.data.message || '获取文件列表失败';
      console.error('获取文件列表失败:', response.data);
    }
  } catch (err) {
    console.error('获取文件列表请求错误:', err);
    error.value = '网络错误，请稍后重试';
  } finally {
    loading.value = false;
  }
};

// 文件上传成功处理
const handleUploadSuccess = () => {
  showUploader.value = false;
  showCenterNotification('文件上传成功！', 'success');
  currentPage.value = 1; // 重置到第一页
  fetchFiles(); // 刷新文件列表
};

// 切换页码
const changePage = (page) => {
  if (page < 1 || page > totalPages.value) return;
  console.log(`将页码从${currentPage.value}切换到${page}`);
  currentPage.value = page;
  files.value = []; // 清空当前文件列表，避免数据混乱
  fetchFiles();
};

// 文件操作函数
const previewFile = (file) => {
  // 保存预览文件信息并显示预览对话框
  previewingFile.value = file;
  showPreview.value = true;
};

const closePreview = () => {
  showPreview.value = false;
  setTimeout(() => {
    previewingFile.value = null;
  }, 300); // 等待关闭动画结束后清除文件
};

const downloadFile = (file) => {
  const a = document.createElement('a');
  a.href = file.url;
  a.download = file.file_name;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};

const shareFile = async (file) => {
  try {
    sharingFile.value = file;
    shareLoading.value = true;
    showShareDialog.value = true;
    
    const token = localStorage.getItem('token');
    const user = localStorage.getItem('user');
    
    if (!token || !user) {
      showCenterNotification('用户未登录或登录已过期', 'error');
      return;
    }
    
    // 构建分享请求数据
    const shareData = {
      filename: file.file_name,
      md5: file.md5,
      token: token,
      user: user
    };
    
    // 发送分享请求
    const response = await axios.post('/api/sharepic?cmd=share', shareData, {
      headers: {
        'Content-Type': 'application/json'
      }
    });
    
    console.log('分享文件响应:', response.data);
    
    if (response.data.code === 0) {
      // 分享成功，生成分享链接
      const urlmd5 = response.data.urlmd5;
      const shareLink = `${window.location.origin}/share?urlmd5=${urlmd5}`;
      shareUrl.value = shareLink;
      showCenterNotification('文件分享成功', 'success');
    } else {
      // 分享失败
      showCenterNotification('文件分享失败', 'error');
      console.error('分享文件失败:', response.data);
    }
  } catch (err) {
    console.error('分享文件请求错误:', err);
    showCenterNotification('网络错误，请稍后重试', 'error');
  } finally {
    shareLoading.value = false;
  }
};

// 关闭分享对话框
const closeShareDialog = () => {
  showShareDialog.value = false;
  setTimeout(() => {
    shareUrl.value = '';
    sharingFile.value = null;
  }, 300);
};

// 复制分享链接
const copyShareLink = () => {
  if (!shareUrlInput.value) return;
  
  // 选择输入框文本
  shareUrlInput.value.select();
  shareUrlInput.value.setSelectionRange(0, 99999);
  
  try {
    // 尝试使用document.execCommand API (兼容性更好)
    const success = document.execCommand('copy');
    if (success) {
      copySuccess.value = true;
      setTimeout(() => {
        copySuccess.value = false;
      }, 2000);
      showCenterNotification('分享链接已复制到剪贴板', 'success');
    } else {
      // 如果execCommand失败，尝试使用Clipboard API
      navigator.clipboard.writeText(shareUrl.value)
        .then(() => {
          copySuccess.value = true;
          setTimeout(() => {
            copySuccess.value = false;
          }, 2000);
          showCenterNotification('分享链接已复制到剪贴板', 'success');
        })
        .catch(err => {
          console.error('复制失败:', err);
          showCenterNotification('复制失败，请手动复制', 'error');
        });
    }
  } catch (err) {
    console.error('复制出错:', err);
    showCenterNotification('复制失败，请手动复制', 'error');
  }
};

// 中央通知提示
const showCenterNotification = (message, type = 'success') => {
  // 创建一个通知元素
  const notificationElement = document.createElement('div');
  notificationElement.className = `center-notification ${type}`;
  
  // 设置内容
  notificationElement.innerHTML = `
    <div class="center-notification-content">
      <span class="center-notification-icon">${type === 'success' ? '✅' : '❌'}</span>
      <span class="center-notification-message">${message}</span>
    </div>
  `;
  
  // 添加到DOM
  document.body.appendChild(notificationElement);
  
  // 添加动画类
  setTimeout(() => {
    notificationElement.classList.add('show');
  }, 10);
  
  // 设置自动消失
  setTimeout(() => {
    notificationElement.classList.remove('show');
    notificationElement.classList.add('hide');
    
    // 动画结束后移除元素
    setTimeout(() => {
      if (document.body.contains(notificationElement)) {
        document.body.removeChild(notificationElement);
      }
    }, 300);
  }, 3000);
};

// 删除相关函数
const confirmDelete = (file) => {
  fileToDelete.value = file;
  showDeleteConfirm.value = true;
};

const cancelDelete = () => {
  showDeleteConfirm.value = false;
  fileToDelete.value = null;
};

const deleteConfirmed = () => {
  if (fileToDelete.value) {
    deleteFile(fileToDelete.value);
  }
};

const deleteFile = async (file) => {
  try {
    isDeleting.value = true;
    const token = localStorage.getItem('token');
    const user = localStorage.getItem('user');
    
    if (!token || !user) {
      error.value = '用户未登录或登录已过期';
      showCenterNotification('用户未登录或登录已过期', 'error');
      return;
    }
    
    // 构建删除请求数据
    const deleteData = {
      filename: file.file_name,
      md5: file.md5,
      token: token,
      user: user
    };
    
    // 发送删除请求
    const response = await axios.post('/api/dealfile?cmd=del', deleteData, {
      headers: {
        'Content-Type': 'application/json'
      }
    });
    
    console.log('删除文件响应:', response.data);
    
    if (response.data.code === 0) {
      // 删除成功
      showCenterNotification(`文件"${file.file_name}"已成功删除`, 'success');
      
      // 判断是否需要返回上一页
      // 如果当前页只有一个文件且不是第一页，删除后应该返回上一页
      if (files.value.length === 1 && currentPage.value > 1) {
        currentPage.value--;
      } else if (currentPage.value > 1 && (currentPage.value - 1) * pageSize >= total.value - 1) {
        // 如果删除后，当前页将没有数据，则返回上一页
        currentPage.value--;
      }
      
      // 刷新文件列表
      files.value = []; // 清空当前数据，避免闪烁
      fetchFiles();
    } else {
      // 删除失败
      error.value = response.data.message || '删除文件失败';
      showCenterNotification(`删除文件失败: ${error.value}`, 'error');
      console.error('删除文件失败:', response.data);
    }
  } catch (err) {
    console.error('删除文件请求错误:', err);
    error.value = '网络错误，请稍后重试';
    showCenterNotification(`删除文件出错: ${error.value}`, 'error');
  } finally {
    isDeleting.value = false;
    showDeleteConfirm.value = false;
    fileToDelete.value = null;
  }
};

// 通知提示相关函数
const showNotification = (message, type = 'success') => {
  // 清除之前的定时器
  if (notification.value.timer) {
    clearTimeout(notification.value.timer);
  }
  
  // 设置新的通知
  notification.value = {
    show: true,
    message,
    type,
    timer: setTimeout(() => {
      notification.value.show = false;
    }, 3000) // 3秒后自动关闭
  };
};

const closeNotification = () => {
  notification.value.show = false;
  if (notification.value.timer) {
    clearTimeout(notification.value.timer);
  }
};

// 直接打开文件选择器
const openFileSelector = () => {
  directFileInput.value.click();
};

// 处理直接文件选择
const handleDirectFileSelect = (event) => {
  const file = event.target.files[0];
  if (file) {
    selectedUploadFile.value = file;
    showUploader.value = true;
    // 清空文件选择器，以便下次选择同一个文件时仍能触发change事件
    directFileInput.value.value = '';
  }
};

// 取消上传
const cancelUpload = () => {
  showUploader.value = false;
  selectedUploadFile.value = null;
};

// 切换共享状态
const toggleShareStatus = async (file) => {
  try {
    const token = localStorage.getItem('token');
    const user = localStorage.getItem('user');
    
    if (!token || !user) {
      showCenterNotification('用户未登录或登录已过期', 'error');
      return;
    }
    
    const isSharing = file.share_status === 0; // 当前为未共享，将要设为共享
    
    if (isSharing) {
      // 设置共享
      // 构建请求数据
      const requestData = {
        filename: file.file_name,
        md5: file.md5,
        token: token,
        user: user
      };
      
      // 显示加载状态
      showCenterNotification('正在设置共享...', 'info');
      
      // 发送请求
      const response = await axios.post('/api/dealfile?cmd=share', requestData, {
        headers: {
          'Content-Type': 'application/json'
        }
      });
      
      console.log('共享状态响应:', response.data);
      
      if (response.data.code === 0) {
        // 修改成功，更新本地状态
        file.share_status = 1;
        showCenterNotification('文件已设为共享', 'success');
      } else if (response.data.code === 3) {
        showCenterNotification('该文件已被他人共享', 'warning');
      } else if (response.data.code === 4) {
        showCenterNotification('登录状态已失效，请重新登录', 'error');
      } else {
        showCenterNotification('操作失败: ' + (response.data.message || '未知错误'), 'error');
      }
    } else {
      // 取消共享
      // 构建请求数据
      const requestData = {
        filename: file.file_name,
        md5: file.md5,
        user: user
      };
      
      // 显示加载状态
      showCenterNotification('正在取消共享...', 'info');
      
      // 发送请求
      const response = await axios.post('/api/dealsharefile?cmd=cancel', requestData, {
        headers: {
          'Content-Type': 'application/json'
        }
      });
      
      console.log('取消共享响应:', response.data);
      
      if (response.data.code === 0) {
        // 取消共享成功，更新本地状态
        file.share_status = 0;
        showCenterNotification('文件已取消共享', 'success');
      } else {
        showCenterNotification('取消共享失败: ' + (response.data.message || '未知错误'), 'error');
      }
    }
  } catch (err) {
    console.error('共享状态请求错误:', err);
    showCenterNotification('网络错误，请稍后重试', 'error');
  }
};

// 初始加载
onMounted(() => {
  fetchFiles();
});
</script>

<style scoped>
.personal-files-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
}

.files-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.files-header h3 {
  margin: 0;
  font-size: 18px;
}

.files-actions {
  display: flex;
  gap: 10px;
}

.refresh-btn {
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
}

.upload-btn {
  background-color: #4caf50;
}

.upload-btn:hover {
  background-color: #45a049;
}

.loading-indicator,
.error-message,
.empty-files {
  padding: 30px;
  text-align: center;
  color: #666;
  background-color: #f9f9f9;
  border-radius: 4px;
  border: 1px solid #eee;
}

.error-message {
  color: #f44336;
}

.files-table-container {
  width: 100%;
  overflow-x: auto;
}

.files-table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.files-table th,
.files-table td {
  text-align: left;
  padding: 10px 10px;
  border-bottom: 1px solid #eee;
}

.files-table th {
  background-color: #f5f5f5;
  font-weight: 500;
  color: #333;
}

.files-table tr:hover {
  background-color: #f9f9f9;
}

.file-icon {
  width: 20px;
  height: 20px;
  background-color: #ddd;
  border-radius: 2px;
}

.image-icon { background-color: #81c784; }
.video-icon { background-color: #64b5f6; }
.pdf-icon { background-color: #e57373; }
.doc-icon { background-color: #4fc3f7; }
.excel-icon { background-color: #66bb6a; }
.text-icon { background-color: #9e9e9e; }
.archive-icon { background-color: #ffb74d; }
.binary-icon { background-color: #ba68c8; }


.action-btn {
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}

.action-btn:hover {
  background-color: #f0f0f0;
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding: 10px 0;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pagination-controls button {
  padding: 5px 10px;
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
}

.pagination-controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 确认对话框样式 */
.confirm-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.confirm-dialog {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.confirm-dialog h3 {
  margin-top: 0;
  color: #333;
}

.warning-text {
  color: #f44336;
  font-weight: 500;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  gap: 10px;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #333;
}

.delete-confirm-btn {
  background-color: #f44336;
}

.delete-confirm-btn:hover {
  background-color: #d32f2f;
}

/* 文件上传对话框样式 */
.upload-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.upload-dialog-container {
  z-index: 1001;
  animation: fade-in 0.3s ease-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 通知提示样式 */
.notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  min-width: 300px;
  max-width: 80%;
  animation: slide-in 0.3s ease-out;
}

.notification-content {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.notification.success .notification-content {
  background-color: #e8f5e9;
  border-left: 4px solid #4caf50;
}

.notification.error .notification-content {
  background-color: #ffebee;
  border-left: 4px solid #f44336;
}

.notification-icon {
  margin-right: 10px;
}

.notification-message {
  flex: 1;
  color: #333;
}

.notification-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #666;
  padding: 0 5px;
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .files-table th:nth-child(2),
  .files-table td:nth-child(2),
  .files-table th:nth-child(4),
  .files-table td:nth-child(4),
  .files-table th:nth-child(5),
  .files-table td:nth-child(5) {
    display: none;
  }
  
  .notification {
    left: 20px;
    right: 20px;
    min-width: auto;
  }
}

.direct-file-input {
  display: none;
}

/* 分享对话框样式 */
.share-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.share-dialog {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  width: 500px;
  max-width: 90%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.share-dialog h3 {
  margin-top: 0;
  color: #333;
}

.share-url-container {
  display: flex;
  margin-bottom: 20px;
}

.share-url-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  font-size: 14px;
}

.copy-btn {
  padding: 10px 15px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  white-space: nowrap;
}

.copy-btn:hover {
  background-color: #45a049;
}

.share-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.close-btn {
  background-color: #f44336;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.close-btn:hover {
  background-color: #d32f2f;
}

/* 中央通知提示样式 */
:global(.center-notification) {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  z-index: 2000;
  min-width: 300px;
  max-width: 80%;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease-out;
}

:global(.center-notification.show) {
  transform: translateX(-50%) translateY(0);
}

:global(.center-notification.hide) {
  transform: translateX(-50%) translateY(-100%);
}

:global(.center-notification-content) {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 4px;
}

:global(.center-notification.success .center-notification-content) {
  background-color: #e8f5e9;
  border-left: 4px solid #4caf50;
}

:global(.center-notification.error .center-notification-content) {
  background-color: #ffebee;
  border-left: 4px solid #f44336;
}

:global(.center-notification-icon) {
  margin-right: 10px;
}

:global(.center-notification-message) {
  color: #333;
}

/* 旧的通知样式 */
.notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  min-width: 300px;
  max-width: 80%;
  animation: slide-in 0.3s ease-out;
}

.toggle-share-btn {
  color: #ff9800;
}

.toggle-share-btn:hover {
  color: #f57c00;
}
</style> 